<!DOCTYPE html>
<html lang="en">
  {% include head.html %}
  <body data-spy="scroll" data-target="#toc" data-offset="70">
    {% include nav.html %}
    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1 class="no-anchor" data-toc-skip>{{ page.title }}</h1>
        <p>{{ page.description }}</p>
      </div>
    </div>
    <div class="container">
      <div class="row row-offcanvas row-offcanvas-right">
        <div class="col-xs-12 col-sm-9">
          {{ content }}
        </div>
        <div class="col-xs-6 col-sm-3 hidden-xs" id="sidebar">
          <div class="card" style="margin-top: 30px">
            <h6 class="card-header no-anchor" data-toc-skip>Stay Informed</h6>
            <div class="card-body">
              <p class="card-text" style="font-size: 15px; font-weight: 400"><a href="https://tinyletter.com/markdownguide">Subscribe via email</a> to get priority notifications about the <em>Markdown Guide</em>.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% include footer.html %}
  </body>
</html>
